<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style>
			*{
			padding: 0;
			margin: 0;
			list-style: none;
			}
			body{
				width: 100%;
				height: 700px;
				position: relative;
			}
			.home{
				width: 100%;
				height:700px;
				background: pink;
			}
			.list{
				width: 100%;
				height: 700px;
				background:blueviolet;
			}
			.detail{
				width: 100%;
				height: 700px;
				background: skyblue;
			}
			p{
				position: absolute;
				bottom: 0;
				height: 30px;
				line-height: 30px;
				color: #fff;
			}
			
		</style>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			
			<transition enter-active-class="animate__animated  animate__fadeInLeft"  leave-active-class="animate__animated   animate__fadeOutRight"   >
			   <router-view></router-view>
			</transition>
			<!-- <transition >
				<router-view></router-view>
			</transition> -->
			<p>
				<router-link to="/home" >首页</router-link>
				<router-link to="/list" >列表页</router-link>
				<router-link to="/detail">详情页</router-link>
				
			</p>
			
			
		</div>
	<template id="home">
		<div class="home">
			
		</div>
	</template>	
		
	<template id="list">
		<div class="list">
			
		</div>
	</template>	
		
		<template id="detail">
			<div class="detail">
				
			</div>
		</template>	
		
		
	<script>
		
		
		var vm=new Vue({
			el:"#app",
			router:new VueRouter({
				routes:[
					{
						path:'/home',
						component:{
							template:"#home"
						}
					},
					{
						path:'/list',
						component:{
							template:"#list"
						}
					},
					{
						path:'/detail',
						component:{
							template:"#detail"
						}
					},
				]
			})
		})
	</script>	
		
		
		
	</body>
</html>
